<template>
	<div class="users">
		<h1>Users</h1>
		<form v-on:submit="addUser">
			<input type="text" v-model="newUser.name" placeholder="Enter name">
			<input type="text" v-model="newUser.email"placeholder="Enter email">
			<input type="submit" value="submit">
		</form>
		<ul>
			<li v-for="user in users">
				<input type="checkbox" class="toggle" v-model="user.contacted">
				<span :class="{contacted:user.contacted}">{{user.name}}:{{user.email}}
				<button v-on:click="deleteUser(user)">x</button></span></li>

		</ul>

	</div>
</template>

<script>
	export default{
		name:"users",
		data(){
			return{
				newUser:{},
				users:[
					{
						name:"xxk",
						email:"123456@qq.com",
						contacted:false
					},
					{
						name:"xxk1",
						email:"1234567@qq.com",
						contacted:false
					},
					{
						name:"xxk2",
						email:"12345678@qq.com",
						contacted:false
					}


				]

			}
		},
			methods:{
				addUser:function(e){
					e.preventDefault();
					this.users.push({
						name:this.newUser.name,
						email:this.newUser.email,
						contacted:false
					})
				},
				deleteUser:function(user){
					this.users.splice(this.users.indexOf(user),1);


				}
			}
	}
</script>

<style scoped>
	.contacted{
		text-decoration: line-through;
	}
</style>